<template>
  <div id="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <router-link to="/">首页</router-link>
      <span>&gt;</span>
      窗宝
    </div>
    <div class="filter-group">
      <div class="sort-group">
        <span
          v-for="(item, index) in sortGroup"
          :key="index"
          :class="{ cur: currentIndex == index }"
          @click="sort(index)"
          >{{ item }}
          <span class="arrow" v-show="currentIndex != index && index">{{
            arrow1
          }}</span>
          <span class="arrow" v-show="currentIndex == index && index">{{
            arrow2
          }}</span>
        </span>
      </div>
    </div>
    <div class="item-list">
      <ul class="inline" v-if="!prods.length">
        <li class="item" v-for="(item, index) in atmbotShow" :key="index">
          <div class="item-info">
            <div class="info-inner">
              <router-link :to="`/product/${item.id}`">
                <img v-lazy="item.s_goods_photos[0].path" alt="" />
              </router-link>
              <div class="price">￥{{ item.sale_price || item.price }}</div>
              <h3>
                <router-link to="/product">{{
                  item.desc.split("-")[0]
                }}</router-link>
              </h3>
              <div class="goods-tip">{{ item.desc.split("-")[1] || "  " }}</div>
              <p>销量:{{ item.sold_num }}|评论:0</p>
              <div class="acts">
                <span class="fav">
                  <i class="iconfont icon-a-wujiaoxingxingxing"></i>
                  收藏</span
                >
                <el-button class="add" @click="addProduct(item)">
                  <i class="iconfont icon-cart"></i>
                  加入购物车</el-button
                >
              </div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="inline" v-if="prods.length">
        <li class="item" v-for="(item, index) in prods" :key="index">
          <div class="item-info">
            <div class="info-inner">
              <router-link :to="`/product/${item.id}`">
                <img v-lazy="item.s_goods_photos[0].path" alt="" />
              </router-link>
              <div class="price">￥{{ item.sale_price || item.price }}</div>
              <h3>
                <router-link to="/product">{{
                  item.desc.split("-")[0]
                }}</router-link>
              </h3>
              <div class="goods-tip">{{ item.desc.split("-")[1] || "  " }}</div>
              <p>销量:{{ item.sold_num }}|评论:0</p>
              <div class="acts">
                <span class="fav">
                  <i class="iconfont icon-a-wujiaoxingxingxing"></i>
                  收藏</span
                >
                <el-button class="add" @click="addProduct(item)">
                  <i class="iconfont icon-cart"></i>
                  加入购物车</el-button
                >
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { addCart } from "../assets/js/request.js";
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      ipt: "",
      sortGroup: ["综合", "评分", "销量", "价格", "上架时间"],
      currentIndex: 0,
      arrow1: "↑",
      arrow2: "↑",
      flag: true,
      prods: [],
    };
  },
  computed: {
    ...mapState("products", ["products"]),
    ...mapGetters("products", ["atmbotShow"]),
  },
  methods: {
    ...mapActions("cart", ["addtocart"]),
    prod() {
      this.prods = [...this.atmbotShow];
    },
    //数量、价格、时间排序
    sort(index) {
      this.prod();
      if (this.currentIndex != index) {
        this.arrow2 = "↓";
        this.currentIndex = index;
      } else {
        if (this.arrow2 == "↑") {
          this.arrow2 = "↓";
        } else if (this.arrow2 == "↓") {
          this.arrow2 = "↑";
        }
      }
      if (this.arrow2 == "↑") {
        switch (index) {
          case 0:
            break;
          case 1:
            break;
          case 2:
            this.prods.sort((a, b) => a.sold_num - b.sold_num);
            break;
          case 3:
            this.prods.sort((a, b) => a.price - b.price);
            break;
          case 4:
            this.prods.sort((a, b) => a.sid - b.id);
            break;
        }
      } else if (this.arrow2 == "↓") {
        switch (index) {
          case 0:
            break;
          case 1:
            break;
          case 2:
            this.prods.sort((a, b) => b.sold_num - a.sold_num);
            break;
          case 3:
            this.prods.sort((a, b) => b.price - a.price);
            break;
          case 4:
            this.prods.sort((a, b) => b.id - a.id);
            break;
        }
      }
    },
    // 添加购物车
    addProduct(item) {
      if (sessionStorage.getItem("token")) {
        this.addtocart(item);
        this.open();
      } else {
        this.$router.push("/login");
      }
    },
    open() {
      this.$message({
        message: "添加成功",
        type: "success",
      });
    },
  },
};
</script>

<style lang="scss">
#container {
  width: 1140px;
  margin: 0 auto;
  padding-bottom: 50px;
  .breadcrumb {
    color: #333;
    line-height: 1.5;
    padding-left: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    a {
      color: #333;
      font-size: 14px;
    }
  }
  .filter-group {
    height: 40px;
    line-height: 40px;
    background-color: #f5f5f5;
    border: 1px solid #dfdfdf;
    margin-bottom: 15px;
    .sort-group {
      & > span {
        display: inline-block;
        padding: 0 15px;
        font-size: 14px;
        cursor: pointer;
        height: 38px;
      }
      & > span:hover {
        background-color: #fff;
      }
      .cur {
        background-color: #fff;
      }
    }
  }
  .item-list {
    .inline {
      overflow: hidden;
      padding-bottom: 80px;
      .item {
        margin-top: 20px;
        position: relative;
        float: left;
        width: 285px;
        height: 370px;
        .item-info {
          position: relative;
          width: 285px;
          height: 450px;
          border: 1px solid transparent;
          &:hover {
            border: 1px solid #dfdfdf;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000;
          }
          &:hover .info-inner .acts {
            display: block;
          }
          .info-inner {
            width: 100%;
            padding: 15px;
            > a {
              display: inline-block;
              width: 255px;
              height: 255px;
              img {
                width: 255px;
                height: 255px;
                margin: 0 auto;
              }
            }
            .price {
              margin-bottom: 3px;
              color: #ee0a3b;
              font-size: 18px;
            }
            h3 {
              font-weight: 400;
              font-size: 14px;
              overflow: hidden;
              white-space: nowrap;
              a {
                color: #333;
              }
            }
            .goods-tip {
              color: #e53333;
              font-size: 14px;
              height: 19px;
              white-space: nowrap;
              overflow: hidden;
              margin-bottom: 10px;
            }
            p {
              margin-bottom: 15px;
              color: #999;
              font-size: 14px;
              line-height: 1.5;
            }
            .acts {
              display: none;
              height: 25px;
              > span {
                display: inline-block;
                height: 25px;
                line-height: 25px;
                border: 1px solid #dfdfdf;
                text-align: center;
                cursor: pointer;
                &:hover {
                  border: 1px solid #ee0a3b;
                }
                &:hover .iconfont {
                  color: #ee0a3b;
                }
              }
              .fav {
                width: 95px;
                height: 25px;
                line-height: 25px;

                .iconfont {
                  vertical-align: middle;
                }
              }
              .add {
                display: inline-block;
                width: 157px;
                height: 23px;
                line-height: 23px;
                transform: translateY(12px);
                .iconfont {
                  vertical-align: middle;
                }
                span {
                  display: inline-block;
                  height: 23px;
                  line-height: 23px;
                  transform: translateY(-13px);
                }
                &:hover .iconfont {
                  color: #ee0a3b;
                }
                &:hover {
                  background-color: #fff;
                  border: 1px solid #ee0a3b;
                  color: #2a2a2a;
                  border-radius: 0;
                }
              }
            }
          }
        }
      }
    }
    .nogoods {
      color: #44aff6;
      text-align: center;
      font-size: 20px;
      line-height: 80px;
    }
  }
}
</style>